import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_practice1/custom_widget.dart';
const double pi = 3.1415926535897932;

class Page3 extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return Page3State();
  }

}

class Page3State extends State{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        maintainBottomViewPadding: true,
        child: Scaffold(
            body: Container(
              height: MediaQuery.of(context).size.height,
              child: Stack(
                children: <Widget>[
                  //顶部背景
                  Positioned(
                    child: Image.asset("images/biology.jpg",fit: BoxFit.fill,),
                  ),
                  //按钮
                  Positioned(
                    top: 16,
                    left: 16,
                    child: Container(
                      padding: EdgeInsets.all(8),
                      decoration: BoxDecoration(
                          color: Colors.black38,
                          borderRadius: BorderRadius.all(Radius.circular(1000))
                      ),
                      child: Icon(Icons.clear,color: Colors.white,size: 28,),
                    ),
                  ),
                  //两个按钮
                  Positioned(
                    top: 16,
                    right: 16,
                    child:Row(
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(right: 12),
                          padding: EdgeInsets.all(8),
                          decoration: BoxDecoration(
                              color: Colors.black38,
                              borderRadius: BorderRadius.all(Radius.circular(1000))
                          ),
                          child: Icon(Icons.create,color: Colors.white,size: 28,),
                        ),
                        Container(
                          padding: EdgeInsets.all(8),
                          decoration: BoxDecoration(
                              color: Colors.black38,
                              borderRadius: BorderRadius.all(Radius.circular(1000))
                          ),
                          child: Icon(Icons.more_vert,color: Colors.white,size: 28,),
                        ),
                      ],
                    )
                  ),
                  //中间部分
                  Positioned(
                    top: 200,
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width,
                      child: Container(
                        width: double.infinity,
                        padding: EdgeInsets.fromLTRB(0,16,0,16),
                        decoration: BoxDecoration(
                          color: ThemeData.light().scaffoldBackgroundColor,
                          borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.fromLTRB(16,0,16,16),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  IconButton(icon: Icon(Icons.grade,color: Colors.blue,size: 28),onPressed: (){},),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.only(left: 16),
                                        child: Text("Running",style: TextStyle(color: Colors.black,fontSize: 28,),),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(left: 16,top: 4),
                                        child: Text("Sunday,May 15 • 8:00 - 9:00",style: TextStyle(color: Colors.black,fontSize: 16),),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                            Container(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.fromLTRB(16,12,16,12),
                                    child: IconDataWidget(Icon(Icons.outlined_flag,size: 28,), "4 sessions a week", "1 hour mornings", Colors.transparent),
                                  ),
                                  Container(
                                    margin: EdgeInsets.fromLTRB(16,12,16,12),
                                    child: IconDataWidget(Icon(Icons.notifications_none,size: 28,), "10 minute before", "Smart notifications are on", Colors.transparent),
                                  ),
                                  Container(
                                    margin: EdgeInsets.fromLTRB(16,12,16,12),
                                    child: IconDataWidget(Icon(Icons.favorite_border,size: 28,), "Connected to Google Fit", "Tap to view in the Fit App", Colors.transparent),
                                  )
                                ],
                              ),
                            ),
                            SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Container(
                                margin: EdgeInsets.only(left: 48),
                                child: Row(
                                  children: <Widget>[
                                    Container(
                                      padding: EdgeInsets.all(16),
                                      child: circleWidget(3, 4, 36, 72, 72),
                                    ),Container(
                                      padding: EdgeInsets.all(16),
                                      child: circleWidget(4, 4, 36, 72, 72),
                                    ),Container(
                                      padding: EdgeInsets.all(16),
                                      child: circleWidget(1, 4, 36, 72, 72),
                                    ),Container(
                                      padding: EdgeInsets.all(16),
                                      child: circleWidget(2, 4, 36, 72, 72),
                                    ),
                                  ],
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                  //底部栏
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: Container(
                      color: ThemeData.light().scaffoldBackgroundColor,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: <Widget>[
                          SizedBox(
                            width: MediaQuery.of(context).size.width,
                            child: Divider(height: 1,thickness: 1.5,),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: <Widget>[
                              Container(
                                margin: EdgeInsets.all(16),
                                child : Text("Later",style: TextStyle(color: Colors.blue,fontSize: 16, fontWeight: FontWeight.bold),),
                              ),
                              Container(
                                margin: EdgeInsets.all(16),
                                child : Text("Done",style: TextStyle(color: Colors.blue,fontSize: 16, fontWeight: FontWeight.bold),),
                              ),
                            ],
                          )
                        ],
                      ),
                    )
                  ),
                ],
              ),
            ),
        ),
      )
    );
  }

}

Widget circleWidget(double now,double max,double radium,double height,double width){
  return SizedBox(
    width: width,
    height: height,
    child: CustomPaint(
      painter: CirclePainter(radium,now / max,height,width),
      child: Container(
        child: Center(
          child: Text("${now.toInt()}/${max.toInt()}",style: TextStyle(fontWeight: FontWeight.normal,fontSize: 24),),
        )
      ),
    ),
  );
}

class CirclePainter extends CustomPainter{
  final double radium;
  final double scale;
  final double height;
  final double width;
  final Paint _paintA = Paint()
    ..color = ThemeData.light().backgroundColor
    ..strokeCap = StrokeCap.round
    ..strokeJoin = StrokeJoin.bevel
    ..style = PaintingStyle.stroke
    ..strokeWidth = 10
    ..isAntiAlias = true;
  final Paint _paintB = Paint()
    ..color = Colors.blue
    ..strokeCap = StrokeCap.round
    ..strokeJoin = StrokeJoin.bevel
    ..style = PaintingStyle.stroke
    ..strokeWidth = 10
    ..isAntiAlias = true;
  CirclePainter(this.radium,this.scale,this.height,this.width);
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(width / 2,height / 2), radium, _paintA);
    Rect rect = Rect.fromCircle(center: Offset(width / 2,height / 2), radius: radium);
    canvas.drawArc(rect, - pi / 2,pi * scale * 2, false, _paintB);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

}